<template>
  <div class="serve-container">
    <g-title title="工会业务" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_ghzdk" />
        <span fz12>工会制度库</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_wsrh" />
        <span fz12>网上入会</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_wszh" />
        <span fz12>网上转会</span>
      </div>
    </div>
    <g-title title="职工权益" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_zgww" />
        <span fz12>职工慰问</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_wwsq" />
        <span fz12>慰问申请</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_zgll" />
        <span fz12>职工疗养</span>
      </div>
    </div>
    <g-title title="工会活动" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_ghhd" />
        <span fz12>工会活动</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_xhtt" />
        <span fz12>协会团体</span>
      </div>
    </div>
    <g-title title="建工立业" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_jgly" />
        <span fz12>建工立业</span>
      </div>
    </div>
    <g-title title="华夏风采" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_hxfc" />
        <span fz12>华夏风采</span>
      </div>
    </div>
    <g-title title="联系交流" class="title_com" />
    <div class="serve_group">
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_hxlt" />
        <span fz12>华夏论坛</span>
      </div>
      <div class="serve_item">
        <i class="iconfont icon-sever_icon_wjdc" />
        <span fz12>问卷调查</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.serve-container {
  .title_com {
    padding: 10px 15px 0;
    ::v-deep h1 {
      padding: 0;
    }
  }
  .serve_group {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      pointer-events: none;
      bottom: 0;
      left: -50%;
      right: -50%;
      height: 1Px;
      border: 0 solid #ebedf0;
      transform: scale(0.5);
      background: #ebedf0;
    }
    .serve_item {
      height: 100px;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span {
        font-weight: 800;
        color: $color-black-3;
      }
      i.iconfont {
        font-size: 32px;
        margin-bottom: 10px;
      }
      .icon-sever_icon_ghzdk {
        color: #57b987;
      }
      .icon-sever_icon_wsrh {
        color: #df614c;
      }
      .icon-sever_icon_wszh {
         color: #3b87f6;
       }
       .icon-sever_icon_zgww {
         color: #ee8332;
       }
       .icon-sever_icon_ghhd {
         color: #ee8332;
       }
       .icon-sever_icon_wwsq {
         color: #df614c;
       }
       .icon-sever_icon_zgll {
         color: #3b87f6;
       }
       .icon-sever_icon_ghhd {
         color: #df614c;
       }
       .icon-sever_icon_xhtt {
         color: #ee8332;
       }
       .icon-sever_icon_jgly {
         color: #57b987;
       }
       .icon-sever_icon_hxfc {
         color: #df614c;
       }
       .icon-sever_icon_hxlt {
         color: #ee8332;
       }
       .icon-sever_icon_wjdc {
         color: #3b87f6;
       }
    }
  }
}
</style>
